/**
 * 
 * @param {*} sourceData 原数据，如：[{cjsj:'08:00',jkl:32.2,ckl:22.1},{cjsj:'09:00',jkl:32.2,ckl:22.1}]
 * @param {*} xKey x轴在数据中的key,如采集时间 cjsj:  'cjsj'
 * @param {*} seriesNameAndDataKey 标题与数据的key，如: [{name:'进口量',dataKey:'jkl'},{name:'出口量',dataKey:'ckl'}]
 * @param {*} titles 标题数组，如：['出口量(万吨)', '进口量(万吨)']
 * @param {*} djg 点间隔，如：5
 * @param {*} zjg 值间隔，如：5
 * @returns 
 */
export function getMultipleGridsLineOption(sourceData, xKey, seriesNameAndDataKey, titles, djg = 5, zjg = 5) {
    const series = [];
    const y = [];
    const x = [];
    const grid = [];
    const dataZoomIndex = []

    seriesNameAndDataKey.forEach((item, index) => {
        dataZoomIndex.push(index)

        const serieObj = {
            xAxisIndex: index,
            yAxisIndex: index,
            name: item.name,
            showAllSymbol: true,
            // 点间隔
            symbolSize: function (value, params) {
                return params.dataIndex % djg === 0 ? 4 : 0
            },
            type: 'line',
            data: sourceData.map(d => d[item.dataKey]),
            emphasis: {
                itemStyle: {
                    borderWidth: 16,
                },
            },
            label: {
                show: true,
                // 设置值间隔
                formatter: function (params) {
                    return params.dataIndex % zjg === 0 ? params.value : ''
                }
            },
            markPoint: {
                data: []
            }

        };
        series.push(serieObj);
        const yObj = {
            gridIndex: index,
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#11366e'
                }
            },
            axisLabel: {
                show: true,
                fontStyle: {
                    color: '#193d73'
                }
            },
            splitLine: {
                show: true,
            },
            axisTick: { show: false },
            name: titles[index],
            nameTextStyle: { padding: [0, 0, 0, 0], color: '#11366e', }
        };
        y.push(yObj);
        const xObj = {
            axisLine: {
                show: index === seriesNameAndDataKey.length - 1 ? true : false,
                lineStyle: {
                    color: '#397cbc'
                }
            },
            axisLabel: {
                show: index === seriesNameAndDataKey.length - 1 ? true : false,
                color: '#193d73',
            },
            axisTick: {
                show: index === seriesNameAndDataKey.length - 1 ? true : false
            },
            gridIndex: index,
            type: 'category',
            boundaryGap: false,
            data: sourceData.map(d => d[xKey])
        };
        x.push(xObj);
        const gridObj = {
            left: '3%',
            right: '3%',
            top: `${index * 150 + 50}px`,
            height: '100px'
        };
        grid.push(gridObj)
    });


    const lineOption = {
        grid: grid,
        tooltip: {
            show: true,
            trigger: "axis",
            formatter: function (params, ticket, callback) {
                let rq = params[0].axisValue;
                let html = `<div>
                        <p>${rq}</p>
                    `
                params.forEach(item => {
                    let seriesName = item.seriesName
                    let value = item.value
                    let color = item.color
                    html += `
                            <div style="display: flex;align-items: center;">
                                <div style="background-color:${color};width:10px;height:10px;border-radius: 50%;"></div>
                                <p style="color:${color};margin-left:10px;">${seriesName}:${value}</p>
                            </div>
                        `
                })
                html += `</div>`
                return html
            }
        },
        xAxis: x,
        yAxis: y,
        axisPointer: {
            link: [{
                xAxisIndex: 'all'
            }]
        },
        series: series,
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: dataZoomIndex,
            },
        ]
    };
    return lineOption;
}